<template>
  <div>
    <BaseTable
      :data.sync="data.template"
      :config="tableConfig"
      :canAdd="true"
    ></BaseTable>
  </div>
</template>

<script>
import BaseTable from "./baseTable.vue";
import { tableConfig } from "./config";
export default {
  name: "Template",
  props: ["data"],
  componentName: "Template",
  components: {
    BaseTable,
  },
  data() {
    return {
      tableConfig,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming",
      ],
    };
  },
  mounted() {
    const vm = this;
    this.tableConfig.forEach((v) => {
      if (v.remote) {
        v.remoteMethod = (val) => {
          if (val.length < 3) {
            v.options = [];
            return;
          }
          setTimeout(() => {
            v.options = vm.states
              .filter((u) => u.toLowerCase().includes(val.toLowerCase()))
              .map((v) => ({ label: v, value: v }));
          });
        };
      }
    });
  },
  methods: {
    getOptions() {},
  },
};
</script>

<style lang="scss" scoped></style>
